<template slot-scope="scope">
  <div class="device-list">
    <div class="device-list-tab">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        :header-cell-style="{
          background: '#ffffff',
          textAlign: 'center',
          color: '#101010',
          padding: '3px',
          fontSize: '15px',
          fontWeight: '900',
        }"
        @selection-change="handleSelectionChange"
        :row-style="{ height: '35px' }"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :style="scope.row.num == '2' ? 'color:#9D9E9E' : ''">{{
              scope.row.date
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="消息内容" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :style="scope.row.num == '2' ? 'color:#9D9E9E' : ''">{{
              scope.row.data
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="消息类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :style="scope.row.num == '2' ? 'color:#9D9E9E' : ''">{{
              scope.row.type
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
            <el-button style="backgroundColor:#3894FF" size="mini" @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button
            > -->

            <span class="table-p" @click="handleDelete(scope.$index, scope.row)"
              >删除</span
            >
            <span v-if="select=='6'" class="table-p" @click="handleRecover(scope.$index, scope.row)"
              >恢复</span
            >
            <span v-else class="table-p" @click="handleEdit(scope.$index, scope.row)"
              >查看</span
            >
          </template>
        </el-table-column>
      </el-table>
      <Dialog
        :dialogVisible="dialogVisible"
        @handleClose="handleClose"
      ></Dialog>
      <DeleDialog
        :dialogDele="dialogDele"
        :select="select"
        :num="num"
        @handleCloseDele="handleCloseDele"
        @handleUnderstand="handleUnderstand"
      ></DeleDialog>
    </div>
  </div>
</template>

<script>
import Dialog from "./dialog.vue";
import DeleDialog from "./DeleDialog.vue";
export default {
  props: {
    // deviceList: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   },
    // },
    tableData: {},
    select:{},
  },
  components: {
    Dialog,
    DeleDialog,
  },
  data() {
    return {
      tableKey: "",
      expands: [], // 表格选中
      rowid: "",
      multipleSelection: [], //多选
      dialogVisible: false, // 查看弹窗
      dialogDele: false, // 删除弹窗
      num:'', // 传给组件
    };
  },
  computed: {},
  created() {
    console.log(this.listarr);
  },
  methods: {
    //恢复
    handleRecover(index , row){
      this.num = '7'
      this.dialogDele = true;
    },
    // 删除弹窗确认
    handleUnderstand(val) {
      this.dialogDele = !this.dialogDele;
    },
    // 删除弹窗关闭
    handleCloseDele() {
      this.dialogDele = !this.dialogDele;
    },
    // 查看消息弹窗关闭
    handleClose(val) {
      this.dialogVisible = !this.dialogVisible;
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //
    handleDelete(index, row) {
      this.num = '6'
      this.dialogDele = true;
    },
    //
    handleEdit(index, row) {
      this.dialogVisible = true;
    },
    //表格颜色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else if (rowIndex % 2 == 1) {
        return "success-row";
      }
      return "success-row";
    },
  },
};
</script>

<style scoped lang="less">
// /deep/.el-button {
//   height: 25px !important;
//   color: #ffffff;
// }
/deep/.cell {
}
.table-p {
  display: inline-block;
  width: 80px;
  height: 26px;
  border-radius: 5px;
  background-color: #f26161;
  text-align: center;
  color: #ffffff;
  line-height: 26px;
}
.table-p:nth-child(2) {
  background-color: #3894ff;
  margin-left: 10px;
}
/deep/th {
  border-bottom: 1px solid gray !important;
  max-height: 35px !important;
}
/deep/ td {
  border-bottom: 1px solid gray !important;
  max-height: 35px !important;
}
.device-list-tab {
  border: 1px solid gray;
}
/deep/.el-table__empty-block,
/deep/.el-table tr,
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  // background-color: #135b7a;
  height: 46px;
  color: #101010;
  font-weight: 600;
}
/deep/.el-table .warning-row td {
  background: #e9f3ff !important;
  height: 35px;
  // color: #fff;
  font-weight: 600;
}

::v-deep .el-table .warning-row td {
  background: #e9f3ff !important;
}
</style>
